<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content=" ">
  <meta name="author" content=" ">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Foodtruck - Tacos : Shortcodes Toggleable</title>

  <link rel="stylesheet" type="text/css" href="./assets/js/customscroll/jquery.mCustomScrollbar.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/flexslider/css/flexslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/prettyPhoto/css/prettyPhoto.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/bxslider/jquery.bxslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/font-awesome.css">

  <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="./assets/flavours/tacos/css/tacos.css">

  <!-- modernizr : detect css transition -->
  <script src="./assets/js/modernizr.custom.81779.js"></script>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="./assets/bootstrap/js/html5shiv.js"></script>
  <script src="./assets/bootstrap/js/respond.min.js"></script>
  <![endif]-->


</head>
<body>



<nav class="navbar navbar-default" role="navigation">
  <div class="inner">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle btn btn-primary" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <div class="text-center">
          <p class="address">
            Tacos Locos - Atlantic Avenue 1234, New York, +66 87 65 43 21
          </p>
        </div>

        <a class="small-brand" href="/"  data-width="221" data-top="58"><img src="./assets/flavours/tacos/images/content/logo-small.png" alt=" " ></a>

        <a href="tel:66-87-65-43-21" class="phoneIcon" style="display:none">+66 87 65 43 21</a>
        <a href="http://goo.gl/maps/IUzKJ" class="locationIcon" target="_blank" style="display:none;">http://goo.gl/maps/IUzKJ</a>
        <ul class="smallSocials">
          <li class="fb"><a href="#"><img src="./assets/images/smallsocial-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/smallsocial-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/smallsocial-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/smallsocial-rss.png" alt="RSS"></a></li>
        </ul>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav text-center" data-type="margin-top" data-pos="138">
          <li><a href="index.html">Home</a></li>
          <li><a href="8_menucard.html">Menu card</a></li>
          <li><a href="9_events.html">Events</a></li>
          <li><a href="10_story.html">Story</a></li>
          <li><a href="11_gallery.html">Gallery</a></li>
          <li class="dropdown active">
            <a href="1_shortcodes_boxes.html" class="dropdown-toggle">Shortcodes</a>
            <ul class="dropdown-menu">
              <li><a href="1_shortcodes_boxes.html">Boxes</a></li>
              <li><a href="2_shortcodes_toggleable.html">Toggleable</a></li>
              <li><a href="3_shortcodes_contact.html">Contact</a></li>
              <li><a href="4_buttons_typography.html">Typography</a></li>
              <li><a href="5_shortcodes_elements.html">Elements</a></li>
              <li><a href="6_images_sliders.html">Sliders</a></li>
            </ul>
          </li>

          <li><a href="7_blog.html">Blog</a></li>
          <li><a href="12_contact.html">Contact</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- / container -->

    <div class="btm"></div>
  </div>

</nav>



<div class="bg-1 section">
  <div class="inner" data-topspace="80" data-bottomspace="100">
    <div class="container">

      <h3 class="hdr4">Tabs</h3>

      <div class="row">
        <div class="col-md-6">

          <h5>A NICE TAB LIGHT</h5>

          <p>
            Pellentesque habitant morbi tristique senectu ac turpis egestas.
          </p>
          <ul class="nav nav-tabs type2">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
            <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active fade in" id="tab1">
              <h6>Vestibulum tortor</h6>

              <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
                egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
              </p>
            </div>
            <div class="tab-pane fade" id="tab2">
              <p>
                Malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et.
              </p>
            </div>
            <div class="tab-pane fade" id="tab3">
              <p>
                Ac turpis egestas vestibulum tortor quam, feugiat vitae, ultricies eget. Placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et.
              </p>
            </div>
          </div>

          <br><br><br>

          <h5>A NICE TAB DARK</h5>

          <p>
            Pellentesque habitant morbi tristique senectu ac turpis egestas.
          </p>
          <ul class="nav nav-tabs type2 dark_ver">
            <li class="active"><a href="#tab4" data-toggle="tab">Tab 1</a></li>
            <li><a href="#tab5" data-toggle="tab">Tab 2</a></li>
            <li><a href="#tab6" data-toggle="tab">Tab 3</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active fade in" id="tab4">
              <h6>Vestibulum tortor</h6>

              <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
                egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
              </p>
            </div>
            <div class="tab-pane fade" id="tab5">
              <p>
                Malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et.
              </p>
            </div>
            <div class="tab-pane fade" id="tab6">
              <p>
                Ac turpis egestas vestibulum tortor quam, feugiat vitae, ultricies eget. Placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et.
              </p>
            </div>
          </div>


        </div>
        <div class="col-md-6"></div>
      </div>


      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Accordion</h3>

      <div class="row">
        <div class="col-md-6">

          <h5>A NICE ACCORDION</h5>

          <p>
            Pellentesque habitant morbi tristique senectu ac turpis egestas.
          </p>


          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#panel1">
                    Best Food in Town
                  </a>
                </h4>
              </div>
              <div id="panel1" class="panel-collapse collapse in">
                <div class="panel-body">
                  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
                  egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#panel2">
                    Only sustainable Ingredients
                  </a>
                </h4>
              </div>
              <div id="panel2" class="panel-collapse collapse">
                <div class="panel-body">
                  Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                  semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo pellentesque.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#panel3">
                    Fresher than Fresh
                  </a>
                </h4>
              </div>
              <div id="panel3" class="panel-collapse collapse">
                <div class="panel-body">
                  Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
                  ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
                </div>
              </div>
            </div>
          </div>
          <!-- / panel-group -->

        </div>
        <div class="col-md-6"></div>
      </div>


    </div>


  </div>
</div>
<!-- / bg-1 -->


<footer>
  <div class="container">

    <div class="row">
      <div class="col-md-3">

        <h4>Contact</h4>

        <p>
          Atlantic Avenue 1234,<br><br>
          New York, NY<br><br>
          123 - 456 - 7891<br><br>
          <a href="mailto:hello@tacoslocos.com">hello@tacoslocos.com</a>
        </p>
        <hr>
        <h4>Hours</h4>

        <p>
          Monday - Friday<br>
          11:00 am - 11:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
        </p>

      </div>
      <div class="col-md-6">
        <img src="./assets/flavours/tacos/images/content/logo.png" alt=" ">

        <div class="googleMap" data-location="Marine Ave. New York, NY" data-text="We are here!"></div>

        <ul class="bigSocials">
          <li class="fb"><a href="#"><img src="./assets/images/social-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/social-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/social-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/social-rss.png" alt="RSS"></a></li>
        </ul>

        <p class="copyright">© Copyright 2014 <a href="#">TemplateRockers</a></p>


      </div>
      <div class="col-md-3">
        <h4>Latest Tweets</h4>

        <div class="tweets">
          <div style="display:none">here will be displayed live tweets, configuration is placed in /twitter/config.php</div>
        </div>
      </div>
    </div>

  </div>
  <a href="#" id="toTop"></a>
</footer>
<!-- / footer -->



<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>

<!-- we're including library : maps.googleapis.com/maps/api/js?sensor=false in main.js -->
<script src="./assets/js/gmap3.min.js"></script>

<script src="./assets/js/customscroll/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="./assets/js/flexslider/jquery.easing.1.3.min.js"></script>
<script src="./assets/js/flexslider/jquery.flexslider-min.js"></script>
<script src="./assets/js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script src="./assets/js/bxslider/jquery.bxslider.min.js"></script>
<script src="./assets/twitter/js/jquery.tweet.js"></script>
<script src="./assets/js/jquery.hoverdir.js"></script><script src="./assets/js/jquery.arctext.js"></script>
<script src="./assets/js/jquery.placeholder.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>

<script src="./assets/form/js/form.js"></script>
<script src="./assets/js/main.js"></script>

<script src="./assets/js/less.min.js"></script>



</body>

</html>